<template>
  <div class="cust">
    <el-card>
      <el-input class="keyword" placeholder="请输入关键字，按回车查找" v-model="q.keyword" size="small" @keyup.enter.native="handleSearch" />
      <el-button type="primary" size="small" @click="handleAdd('operate_modal', defaultValue)">新增</el-button>
    </el-card>
    <div style="height:10px"></div>
    <el-table :data="tableData" :height="tableHeight">
      <el-table-column prop="custId" label="客户编号" width="100"></el-table-column>
      <el-table-column prop="name" label="客户名称"></el-table-column>
      <el-table-column prop="rank" label="等级" width="100">
        <template slot-scope="scope">
          {{ RANK[scope.row.rank] }}
        </template>
      </el-table-column>
      <el-table-column prop="simpleNm" label="客户简称" width="240"></el-table-column>
      <el-table-column prop="contact" label="联络人" width="100"></el-table-column>
      <el-table-column prop="phone1" label="联络电话1" width="120"></el-table-column>
      <el-table-column prop="phone2" label="联络电话2" width="120"></el-table-column>
      <el-table-column prop="balance" label="结算方式" width="100">
        <template slot-scope="scope">
          {{ scope.row.balance === 1 ? '信用' : '现结' }}
        </template>
      </el-table-column>
      <el-table-column prop="payMethod" label="付款方式" width="120">
        <template slot-scope="scope">
          {{ scope.row.payMethod === 1 ? '银行转账' : '银行承兑' }}
        </template>
      </el-table-column>
      <el-table-column width="200" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleProject( scope.row)">项目管理</el-button>
          <el-button type="text" @click="handleEdit('operate_modal', scope.row)">编辑</el-button>
          <el-button type="text" v-if="scope.row.ifUse === 1" @click="handleToggle(scope.row)">停用</el-button>
          <el-button type="text" v-else @click="handleToggle(scope.row)">启用</el-button>
          <el-button type="text" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <OperateModal ref="operate_modal" @ok="handleSearch" />
  </div>
</template>

<script>
import OperateModal from './modal/operateModal.vue'
import { indexMixin } from '@/utils/mixin'
import { getCustList, removeCust, ifuse } from '@/api/cust'
export default {
  data () {
    return {
      RANK: {
        1: '客户',
        2: '经销商'
      },
      tableData: [],
      defaultValue: {
        rank: 1,
        balance: 1,
        payMethod: 1
      },
      q: {
        keyword: ''
      }
    }
  },
  mixins: [indexMixin],
  components: {
    OperateModal
  },
  created () {
    this.handleSearch()
  },
  computed: {
    tableHeight () {
      // const pagination = 60
      const condition = 84
      const pagePadding = 40
      const header = 60
      return window.innerHeight - condition - pagePadding - header
    },
  },
  methods: {
    async queryList () {
      const res = await getCustList(this.q)
      if (res.code === 200) {
        this.tableData = res.data
      } else {
        this.$message.error(res.msg)
        this.tableData = []
      }
    },
    handleSearch () {
      this.queryList()
    },
    handleRemove (row) {
      if (!row.id) {
        this.$message.warning('数据异常：缺少id')
        return;
      }
      this.$confirm('确定要删除吗？', '提示').then(async () => {
        await removeCust(row.id)
        this.handleSearch()
      })
    },
    handleProject(row) {
      this.$router.push({
        path: '/project',
        query: {
          custId: row.custId
        }
      })
    },
    async handleToggle (row) {
      if (!row.id) {
        this.$message.warning('数据异常：缺少id')
        return;
      }
      const res = await ifuse(row.id)
      if (res.code === 200) {
        this.handleSearch()
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.cust {
  height: 100%;
}
</style>